/**
 * Created by wei on 17/11/23.
 */


import React, { Component } from 'react';
import axios from 'axios';
import base from '../base.js';
import cookie from '../cookie.js';
import "./css/publish.css";

const basePath = base().basePath;

class LoginForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            errorInfo:'',
            loading:false
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    hideDiv(){
        this.setState({
            loading:false,
        });
        const {fnHideDiv} = this.props;
        fnHideDiv();
    }


    handleSubmit(){
        this.setState({
            loading:true,
        });
        var that = this;
        axios.post(basePath+'/user/login',{'username':this.refs.username.value,
            'password':this.refs.password.value})
            .then((res) => {
                if(res.data.token){
                    var token = res.data.token;
                    var nickname = res.data.nickname;
                    var avatar = res.data.avatar;
                    cookie.setCookie('nickname',nickname,100);
                    cookie.setCookie('token',token,100);
                    cookie.setCookie('avatar',avatar,100);
                    const {fnHideDiv} = that.props;
                    setTimeout(function () {
                        that.setState({
                            loading:false,
                        });
                        fnHideDiv();
                    }, 1500);
                }else{
                    that.setState({
                        loading:false,
                        errorInfo:'邮箱或者密码错误.'
                    });
                }
            });
        return false;
    }



    showLoading(){
        if(this.state.loading){
            return (
                <div style={{position:'absolute', top:'130px', left:'190px', zIndex:1100}}>
                    <img src="/images/loading.gif" width={40} height={40}/>
                </div>
            );
        }
    }


    showContent(){

        const {visible} = this.props;

        if(visible){
            return (
                <div>
                    <div className="sign-in-box model fadeInUp animated">
                        <div style={{position:'absolute', top:'5px', right:'5px'}}>
                            <a href="javascript:void(0)" onClick={()=>this.hideDiv()}><img src="/images/close.png" width={20} height={20}/></a>
                        </div>
                        <div className="sigin-left">
                            <div className="signin-form clearfix">
                                {this.showLoading()}
                                <h4 className="social-signin-heading">账号登陆</h4>
                                <form>
                                    <div className="signin-section clearfix">
                                        <input ref="username" className="form-input form-input-first" name="username" placeholder="邮箱" type="text" />

                                        <input type="password" ref="password" className="form-input" placeholder="密码" name="password"/>
                                    </div>
                                    <div class="signin-error" id="signin-error">{this.state.errorInfo}</div>
                                    <button type="button"  onClick={()=>this.handleSubmit()} className="form-submit">登陆</button>
                                </form>
                            </div>
                            <div className="signin-foot clearfix">
                            </div>
                        </div>
                    </div>
                    <div className="shade" style={this.state.loading ? {zIndex:1501} : {}} onClick={()=>this.hideDiv()}></div>
                </div>
            );
        }else{
            return (<div></div>);
        }
    }

    render(){
        return (
            <div>
                {this.showContent()}
            </div>
        );
    }

}

export default LoginForm;
